{extend name="admin/base" /}
{block name="resources"/}
<!--<link rel="stylesheet" href="__STATIC__/lib/bootstrap-daterangepicker-master/daterangepicker.css">-->
{/block}
{block name="main"}
<!-- page -->

<!--<div class="row orderList goodAs">
    <div class="col-sm-6" style="text-align: center">
        <span class="plpr15">下单时间</span>
        <span class="pr">
            <input type="text" id="startDate" class="ol_datewidth" name="startDate" placeholder="开始日期" style="text-align: center;width: 160px" value="{$start_date}">
            <label for="startDate"><i class="fa icon-calendar"></i></label>
        </span>
        <span>~</span>
        <span class="pr">
            <input type="text" id="endDate" class="ol_datewidth" name="endDate" placeholder="结束日期" style="text-align: center;width: 160px" value="{$end_date}">
            <label for="endDate"><i class="fa icon-calendar"></i></label>
        </span>
    </div>
    <div class="col-sm-6">
        <div class="col-sm-2" style="text-align: right;padding-top: 5px">地区</div>
        <div data-toggle="distpicker" class="col-sm-10">
            <select id="province" class="ol_datewidth" style="width: 160px">
                <option value="0"  selected>省级</option>
            </select>
            <select id="city" class="ol_datewidth" style="width: 160px">
                <option value="0"  selected>市级</option>
            </select>
        </div>
    </div>
    <div class="col-sm-12 goodsAnaly_sch mbmt">
        <a href="javascript:void(0);" class="search_to"><i class="icon icon-search"></i> 搜索</a>
    </div>

</div>-->
<form class="v-filter-container">
    <div class="filter-fields-wrap">
        <div class="filter-item clearfix">
            <div class="filter-item__field">
                <div class="v__control-group">
                    <label class="v__control-label">下单时间</label>
                    <div class="v__controls v-date-input-control">
                        <label for="orderTime">
                            <input type="text" class="v__control_input pr-30" id="orderTime" placeholder="请选择时间" autocomplete="off" data-types="datetime">
                            <i class="icon icon-calendar"></i>
                            <input type="hidden" id="startDate">
                            <input type="hidden" id="endDate">
                        </label>
                    </div>
                </div>
                <div class="v__control-group">
                    <label class="v__control-label">地区</label>
                    <div class="v__controls">
                        <select class="v__control_input"  name="province" id="province" style="margin-right: 10px;display: inline-block">
                            <option value="">省级</option>
                        </select>
                        <select class="v__control_input"  name="city" id="city" style="display: inline-block">
                            <option value="">市级</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="filter-item clearfix">
            <div class="filter-item__field">
                <div class="v__control-group">
                    <label class="v__control-label"></label>
                    <div class="v__controls">
                        <a class="btn btn-primary search_to"><i class="icon icon-search"></i> 搜索</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="screen-title"><span class="text">订单情况</span></div>
<div class="index_tables">
    <div id="container_condition" style="height: 400px"></div>
</div>
<div class="screen-title"><span class="text">端口分布</span></div>
<div class="index_tables row">
    <div class="col-sm-6">
        <div id="port_distribution" style="height: 400px"></div>
    </div>
    <div class="col-sm-6">
        <table class="table v-table">
            <thead>
                <tr>
                    <th>端口</th>
                    <th>成交订单（笔）</th>
                    <th>成交金额（元）</th>
                    <th>成交会员（人）</th>
                </tr>
            </thead>
            <tbody id="port_list">


            </tbody>
        </table>
    </div>
    
</div>

<div class="screen-title"><span class="text">地区分布</span></div>
<div class="index_tables">
    <div id="container_distribution" style="height: 400px"></div>
</div>
<div class="area-table">
    <table class="table table-hover v-table">
        <thead>
            <tr>
                <th>地区</th>
                <th>成交订单（笔）</th>
                <th>成交金额（元）</th>
                <th>成交会员（人）</th>
            </tr>
        </thead>
        <tbody id="area_list">

        </tbody>
    </table>
</div>
<!-- page end -->
{/block}
{block name="script"}
<script>
require(['util','utilAdmin'], function (util,utilAdmin) {
$(function () {
    util.layDate('#orderTime',true,function(value, date, endDate){
        var h=date.hours<10 ?"0"+date.hours : date.hours;
        var m=date.minutes<10 ?"0"+date.minutes : date.minutes;
        var s=date.seconds<10 ?"0"+date.seconds : date.seconds;
        var h1=endDate.hours<10 ?"0"+endDate.hours : endDate.hours;
        var m1=endDate.minutes<10 ?"0"+endDate.minutes : endDate.minutes;
        var s1=endDate.seconds<10 ?"0"+endDate.seconds : endDate.seconds;
        var date1=date.year+'-'+date.month+'-'+date.date+' '+h+":"+m+":"+s;
        var date2=endDate.year+'-'+endDate.month+'-'+endDate.date+' '+h1+":"+m1+":"+s1;

        if(value){
            $('#startDate').val(date1);
            $('#endDate').val(date2);
        }
        else{
            $('#startDate').val('');
            $('#endDate').val('');
        }

    });
    window['areas'] = {$areas};
    initProvince(areas);
    showCharts();
    $("#province").on('change', function () {
        initCity($("#province").val());
    });
});
loading();
function loading(){
    $.ajax({
        type : "post",
        url : "{:__URL('ADMIN_MAIN/statistics/orderProfile')}",
        async : true,
        data: {
            "start_date": $("#startDate").val(),
            "end_date": $("#endDate").val(),
            "province_id": $("#province").val(),
            "city_id": $("#city").val()
        },
        success : function(data) {
            var option2 = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['订单量','付款订单','售后订单']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data[0]
                },
                yAxis: {
                    type: 'value',
                    name:'数量',
                },
                series: [
                    {
                        name:'订单量',
                        type:'line',
                        // stack: '总量',
                        data:data[1][0]['data']
                    },
                    {
                        name:'付款订单',
                        type:'line',
                        // stack: '总量',
                        data:data[1][1]['data']
                    },
                    {
                        name:'售后订单',
                        type:'line',
                        // stack: '总量',
                        data:data[1][2]['data']
                    }
                ]
            };
            util.chart('container_condition',option2);
        }
    });
}

function initProvince(areas) {
    $.each(areas.province, function (key, value) {
        $("#province").append('<option value=' + key + '>' + value + '</option>');
    });
}

function initCity(province_id) {
    $("#city").empty()
    if (province_id != 0) {
        $.each(areas.city[province_id], function (key, value) {
            $("#city").append('<option value=' + key + '>' + value + '</option>');
        });
    }
}
function showCharts() {
    $.ajax({
        type : "post",
        url : "{:__URL('ADMIN_MAIN/statistics/orderDistribution')}",
        async : true,
        data: {
            "start_date": $("#startDate").val(),
            "end_date": $("#endDate").val(),
            "province_id": $("#province").val(),
            "city_id": $("#city").val()
        },
        success : function(dataInfo) {
            var option1 = {
                title : {
                    text: '订单来源',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['PC端','wap端','app端','微信端']
                },
                series : [
                    {
                        name: '订单来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:dataInfo['order_from3'], name:'PC端'},
                            {value:dataInfo['order_from2'], name:'wap端'},
                            {value:dataInfo['order_from5'], name:'app端'},
                            {value:dataInfo['order_from1'], name:'微信端'},
                            // {value:dataInfo['order_from6'], name:'小程序端'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            util.chart('port_distribution',option1);
            var html = '';
            html += '<tr>';
            html += '<td>pc端</td>';
            html += '<td>'+dataInfo['order_from3']+'</td>';
            html += '<td>'+dataInfo['order_from3_money']+'</td>';
            html += '<td>'+dataInfo['order_from3_member']+'</td>';
            html += '</tr>';
            html += '<tr>';
            html += '<td>app端</td>';
            html += '<td>'+dataInfo['order_from5']+'</td>';
            html += '<td>'+dataInfo['order_from5_money']+'</td>';
            html += '<td>'+dataInfo['order_from5_member']+'</td>';
            html += '</tr>';
            html += '<tr>';
            html += '<td>wap端</td>';
            html += '<td>'+dataInfo['order_from2']+'</td>';
            html += '<td>'+dataInfo['order_from2_money']+'</td>';
            html += '<td>'+dataInfo['order_from2_member']+'</td>';
            html += '</tr>';
            html += '<tr>';
            html += '<td>微信端</td>';
            html += '<td>'+dataInfo['order_from1']+'</td>';
            html += '<td>'+dataInfo['order_from1_money']+'</td>';
            html += '<td>'+dataInfo['order_from1_member']+'</td>';
            html += '</tr>';
            // html += '<tr>';
            // html += '<td>小程序端</td>';
            // html += '<td>'+dataInfo['order_from6']+'</td>';
            // html += '<td>'+dataInfo['order_from6_money']+'</td>';
            // html += '<td>'+dataInfo['order_from6_member']+'</td>';
            // html += '</tr>';
            $("#port_list").html(html);
            if(dataInfo["area_info"]){
                var option3 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : dataInfo["area_info"]["areas"],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name:'数量'
                        }
                    ],
                    series : [
                        {   
                            name:'数量',
                            type:'bar',
                            barWidth: '60%',
                            data:dataInfo["area_info"]["counts"]
                        }
                    ]
                };
                util.chart('container_distribution',option3);
                var html1='';
                for (var i = 0; i < dataInfo["area_info"]['areas'].length; i++) {
                    html1 += '<tr>';
                    html1 += '<td>' + dataInfo["area_info"]['areas'][i] + '</td>';
                    html1 += '<td>' + dataInfo["area_info"]['counts'][i]+ '</div></td>';
                    html1 += '<td>' + dataInfo["area_info"]['order_from_money'][i] + '</td>';
                    html1 += '<td>' + dataInfo["area_info"]['order_from_member'][i] + '</td>';
                    html1 += '</tr>';
                }
                $("#area_list").html(html1);
            }else{
                var city_name = '';
                var pro_name = '';
                if($("#seleAreaThird").val()>0){
                    city_name = $("#seleAreaThird option:selected").text();
                }
                if($("#seleAreaNext").val()>0) {
                    pro_name = $("#seleAreaNext option:selected").text();
                }
                var name = [];
                if(city_name){
                    name = [city_name];
                }else{
                    name = [pro_name];
                }
                // var myChart4 = echarts.init(document.getElementById('container_distribution'),'walden');
                var option4 =  {
                    xAxis: {
                        type: 'category',
                        data: name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [0],
                        type: 'bar'
                    }]
                };
                // myChart4.setOption(option4);
                util.chart('container_distribution',option4);
                var html2='';
                html2 += '<tr><td colspan="6" class="h-200">暂无符合条件的数据记录</td></tr>';
                $("#area_list").html(html2);
            }

        }
    });
}
$('body').on('click','.search_to',function(){
    showCharts();
})
})
</script>

{/block}